<template>
  <el-dialog
    v-model="dialogVisible"
    :title="mode === 'create' ? '新增岗位要求' : '编辑岗位要求'"
    width="700px"
    :before-close="handleClose"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="岗位名称" prop="positionName">
        <el-input
          v-model="formData.positionName"
          placeholder="请输入岗位名称"
        />
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="部门" prop="department">
            <el-input v-model="formData.department" placeholder="请输入部门" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职级" prop="level">
            <el-select v-model="formData.level" placeholder="请选择职级">
              <el-option label="初级" value="初级" />
              <el-option label="中级" value="中级" />
              <el-option label="高级" value="高级" />
              <el-option label="专家" value="专家" />
              <el-option label="管理" value="管理" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="学历要求" prop="requiredEducation">
            <el-select
              v-model="formData.requiredEducation"
              placeholder="请选择学历要求"
            >
              <el-option label="高中" value="高中" />
              <el-option label="大专" value="大专" />
              <el-option label="本科" value="本科" />
              <el-option label="硕士" value="硕士" />
              <el-option label="博士" value="博士" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作年限" prop="minWorkYears">
            <el-input-number
              v-model="formData.minWorkYears"
              :min="0"
              :max="50"
              controls-position="right"
              placeholder="最低工作年限"
            />
            <span style="margin-left: 8px">年</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="最低绩效要求" prop="minPerformanceScore">
        <el-input-number
          v-model="formData.minPerformanceScore"
          :min="0"
          :max="5"
          :step="0.1"
          controls-position="right"
          placeholder="最低绩效分数"
        />
        <span style="margin-left: 8px">分（5分制）</span>
      </el-form-item>

      <el-form-item label="绩效领导力要求">
        <el-input
          v-model="formData.leadershipRequirement"
          placeholder="请输入绩效领导力要求（如无要求请留空）"
        />
      </el-form-item>

      <el-form-item label="技术能力要求">
        <el-input
          v-model="formData.technicalRequirements"
          type="textarea"
          :rows="3"
          placeholder="请输入技术能力要求"
        />
      </el-form-item>

      <el-form-item label="人际交往能力要求">
        <el-input
          v-model="formData.communicationRequirements"
          placeholder="请输入人际交往能力要求"
        />
      </el-form-item>

      <el-form-item label="所需技能">
        <el-input
          v-model="formData.requiredSkills"
          type="textarea"
          :rows="3"
          placeholder="请输入岗位所需的专业技能"
        />
      </el-form-item>

      <el-form-item label="岗位描述" prop="description">
        <el-input
          v-model="formData.description"
          type="textarea"
          :rows="4"
          placeholder="请输入详细的岗位描述"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref, watch, nextTick } from "vue";
import { ElMessage } from "element-plus";

export default {
  name: "PositionDialog",
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    position: {
      type: Object,
      default: null,
    },
    mode: {
      type: String,
      default: "create",
    },
  },
  emits: ["update:modelValue", "save", "close"],
  setup(props, { emit }) {
    const dialogVisible = ref(false);
    const formRef = ref();
    const loading = ref(false);

    const formData = ref({
      positionName: "",
      department: "",
      level: "",
      requiredEducation: "",
      minWorkYears: 0,
      minPerformanceScore: 0,
      leadershipRequirement: "",
      technicalRequirements: "",
      communicationRequirements: "",
      requiredSkills: "",
      description: "",
    });

    const rules = {
      positionName: [
        { required: true, message: "请输入岗位名称", trigger: "blur" },
      ],
      department: [{ required: true, message: "请输入部门", trigger: "blur" }],
      level: [{ required: true, message: "请选择职级", trigger: "change" }],
      requiredEducation: [
        { required: true, message: "请选择学历要求", trigger: "change" },
      ],
      minWorkYears: [
        { required: true, message: "请输入最低工作年限", trigger: "blur" },
      ],
      minPerformanceScore: [
        { required: true, message: "请输入最低绩效要求", trigger: "blur" },
      ],
      description: [
        { required: true, message: "请输入岗位描述", trigger: "blur" },
      ],
    };

    watch(
      () => props.modelValue,
      (newVal) => {
        dialogVisible.value = newVal;
        if (newVal && props.position) {
          // 编辑模式下填充数据
          nextTick(() => {
            formData.value = { ...props.position };
          });
        } else if (newVal) {
          // 创建模式下重置数据
          formData.value = {
            positionName: "",
            department: "",
            level: "",
            requiredEducation: "",
            minWorkYears: 0,
            minPerformanceScore: 0,
            leadershipRequirement: "",
            technicalRequirements: "",
            communicationRequirements: "",
            requiredSkills: "",
            description: "",
          };
        }
      }
    );

    watch(dialogVisible, (newVal) => {
      emit("update:modelValue", newVal);
    });

    const handleClose = () => {
      dialogVisible.value = false;
      emit("close");
    };

    const handleSubmit = async () => {
      if (!formRef.value) return;

      try {
        const valid = await formRef.value.validate();
        if (valid) {
          loading.value = true;
          emit("save", { ...formData.value });
        }
      } catch (error) {
        ElMessage.error("请完善表单信息");
      } finally {
        loading.value = false;
      }
    };

    return {
      dialogVisible,
      formRef,
      formData,
      rules,
      loading,
      handleClose,
      handleSubmit,
    };
  },
};
</script>
